import { defineComponent, h } from 'vue'
import { SizeProps } from '../type'

const basicProps = {
  name: {
    type: String,
    require: true
  },
  size: {
    type: String,
    default: '18px'
  },
  color: String,
  ...SizeProps
}

function useIcon(props) {
  const { xs, sm, md, bg, size, ...obj } = props
  const iconS = xs ? '12px' : sm ? '16px' : md ? '20px' : bg ? '26px' : size
  return { iconS, ...obj }
}

export const Iconfont = defineComponent({
  name: 'Iconfont',
  props: basicProps,
  setup(props) {
    const { iconS, color, name } = useIcon(props)
    return () => h('i',
      {
        style: { fontSize: iconS, color: color },
        class: `icon-font iconfont icon-${name}`
      }
    )
  }
})

// export const IconSvg = defineComponent({
//   name: 'IconSvg',
//   props: basicProps,
//   template: '<svg class="icon-svg icon" aria-hidden="true" :style="{ width: iconS, height: iconS, fill: color }"><use :xlink-href="`#icon-${name}`"></use></svg>',
//   setup(props) {
//     return {
//       ...useIcon(props)
//     }
//   }
// })
